<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="Wexigua - 西瓜味微信，清爽社交新体验" />
    <meta name="keywords" content="微信,西瓜,社交,聊天" />
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍉</text></svg>" />
    <title>Wexigua - 西瓜味微信</title>

    <style>
        /* 全局西瓜主题变量 */
        :root {
            --watermelon-red: #ff4c4c;
            --watermelon-green: #2ecc71;
            --seed-black: #333;
            --watermelon-pink: #ff9bb3;
            --watermelon-light: #f8f8f8;
        }

        /* 基础样式重置 */
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--watermelon-light);
            color: #333;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Vue挂载点样式 */
        #app {
            display: flex;
            flex-direction: column;
        }

        /* 加载动画 - 西瓜主题 */
        .app-loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: white;
            z-index: 9999;
            flex-direction: column;
        }
        .watermelon-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid var(--watermelon-green);
            border-top-color: var(--watermelon-red);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .loading-text {
            margin-top: 20px;
            color: var(--watermelon-green);
            font-size: 18px;
        }
    </style>
</head>
<body>
<!-- 加载状态（Vue挂载后会自动移除） -->
<div id="app-loading" class="app-loading">
    <div class="watermelon-spinner"></div>
    <div class="loading-text">Wexigua 加载中...</div>
</div>

<!-- Vue挂载点 -->
<div id="app"></div>

<script type="module" src="/src/main.js"></script>

<script>
    // 加载完成后移除loading
    window.addEventListener('load', function() {
        const loading = document.getElementById('app-loading');
        if (loading) {
            setTimeout(() => {
                loading.style.opacity = 0;
                setTimeout(() => loading.remove(), 300);
            }, 300);
        }
    });
</script>
</body>
</html>
